import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';

import { voteAngular, voteVuejs, voteReact } from './actions';

class App extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.store;
    this.handleVoteAngular = this.handleVoteAngular.bind(this);
    this.handleVoteReact = this.handleVoteReact.bind(this);
    this.handleVoteVuejs = this.handleVoteVuejs.bind(this);
  }

  handleVoteAngular() {
    this.store.dispatch(voteAngular());
  }
  handleVoteReact() {
    this.store.dispatch(voteReact());
  }
  handleVoteVuejs() {
    this.store.dispatch(voteVuejs());
  }

  render() {
    return (
      <div
        className="jumbotron"
        style={{
          textAlign: 'center'
        }}
      >
        <h1>React ,Angular and Vuejs Choose voting</h1>

        <h3>What is your favorite font-end framwork 2007</h3>
        <small>click on the button below to vote</small>
        <hr className="my-4" />
        <p className="lead">
          <button
            type="button"
            className="btn btn-primary btn-lg"
            onClick={this.handleVoteReact}
          >
            Choose React
          </button>&nbsp;&nbsp;
          <button
            type="button"
            className="btn btn-primary btn-lg"
            onClick={this.handleVoteAngular}
          >
            Choose Angular
          </button>&nbsp;&nbsp;
          <button
            type="button"
            className="btn btn-primary btn-lg"
            onClick={this.handleVoteVuejs}
          >
            Choose Vuejs
          </button>
        </p>
      </div>
    );
  }
}

export default App;
